<template>
  <div class="app-container">

    <div class="filter-container">
      <el-select
        v-model="repositoryName"
        clearable
        filterable
        :placeholder="$t('请选择存储库')"
        :loading="loading"
        @change="search"
      >
        <el-option
          v-for="(v,k,index) of resData"
          :key="index"
          :label="k"
          :value="k"
        />
      </el-select>
      <el-button
        size="mini"
        type="warning"
        @click.native="openAddDialog = true"
      >{{ $t('新建快照') }}
      </el-button>
      <el-button
        size="mini"
        type="success"
        @click="search"
      >{{ $t('刷新') }}
      </el-button>
    </div>
    <el-table
      :data="tableData"
    >
      <el-table-column
        :label="$t('序号')"
        align="center"
        fixed
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('快照名')" prop="id" width="100" />
      <el-table-column align="center" :label="$t('备份索引数')" prop="indices" width="100" />

      <el-table-column align="center" :label="$t('状态')" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 'SUCCESS'" type="success">{{ $t('成功') }}</el-tag>
          <el-tag v-else-if="scope.row.status == 'IN_PROGRESS'" type="warning">{{ $t('还在进行中') }}</el-tag>
          <el-tag v-else>{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('开始详细时间')" width="180">
        <template slot-scope="scope">
          <div>{{ timestampToTime(scope.row.start_epoch) }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('结束详细时间')" width="180">
        <template slot-scope="scope">
          <div>{{ timestampToTime(scope.row.end_epoch) }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('耗费时长')" prop="duration" width="120" />
      <el-table-column align="center" :label="$t('分片总数')" prop="total_shards" width="120" />
      <el-table-column align="center" :label="$t('成功分片数')" prop="successful_shards" width="120" />
      <el-table-column align="center" :label="$t('失败分片数')" prop="failed_shards" width="120" />

      <el-table-column align="center" :label="$t('操作')" fixed="right" width="350">
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              type="success"
              size="mini"
              icon="el-icon-search"
              @click="look(scope.row.id)"
            >{{ $t('查看') }}
            </el-button>

            <el-button

              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="SnapshotDeleteAction(scope.row.id)"
            >{{ $t('删除') }}
            </el-button>
            <el-button

              type="warning"
              size="mini"
              icon="el-icon-refresh"
              @click="openRestore(scope.row.id)"
            >{{ $t('恢复') }}
            </el-button>
            <el-button
              size="mini"

              type="primary"

              icon="el-icon-refresh"
              @click="status(scope.row.id)"
            >{{ $t('状态') }}
            </el-button>

          </el-button-group>

        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      ref="drawer"
      :title="$t('快照详细信息')"
      :before-close="drawerHandleClose"
      :visible.sync="drawerShow"
      direction="rtl"
      close-on-press-escape
      destroy-on-close
      size="50%"
    >

      <json-editor

        v-model="JSON.stringify(snapshotDetail,null, '\t')"
        class="res-body"
        styles="width: 100%"
        :read="true"
        :title="$t('快照详细信息')"
      />
    </el-drawer>

    <add
      v-if="openAddDialog"
      :open="openAddDialog"
      @close="closeAddDialog"
    />
    <snapshot-restore
      v-if="openRestoreDialog"
      :repository="repositoryName"
      :snapshot="name"
      :open="openRestoreDialog"
      @close="closeoRestoreDialog"
    />

  </div>
</template>

<script>
import {
  SnapshotDeleteAction,
  SnapshotDetailAction,
  SnapshotListAction,
  SnapshotRepositoryListAction,
  SnapshotStatusAction
} from '@/api/es-backup'

import { timestampToTime } from '@/utils/time'

export default {
  name: 'ResTable',
  components: {
    'JsonEditor': () => import('@/components/JsonEditor/index'),
    'Add': () => import('@/views/back-up/components/addSnapshot'),
    'SnapshotRestore': () => import('@/views/back-up/components/snapshotRestore')
  },
  data() {
    return {
      openRestoreDialog: false,
      openAddDialog: false,
      loading: false,
      repositoryName: '',
      resData: {},
      name: '',
      drawerShow: false,
      tableData: [],
      index: 0,
      tableHeader: [],
      snapshotDetail: ''
    }
  },
  created() {
    this.initRepositoryName()
  },
  methods: {
    async status(name) {
      const input = {}
      input['es_connect'] = this.$store.state.baseData.EsConnectID
      input['snapshot'] = name
      input['repository'] = this.repositoryName

      const { data, code, msg } = await SnapshotStatusAction(input)
      if (code != 0) {
        this.$message({
          type: 'error',
          message: msg
        })
        return
      } else {
        this.snapshotDetail = data.snapshots
        this.drawerShow = true
        this.$message({
          type: 'success',
          message: msg
        })
        return
      }
    },
    openRestore(name) {
      this.name = name
      this.openRestoreDialog = true
    },
    timestampToTime(timestamp) {
      return timestampToTime(timestamp)
    },

    async SnapshotDeleteAction(name) {
      const input = {}
      input['es_connect'] = this.$store.state.baseData.EsConnectID
      input['snapshot'] = name
      input['repository'] = this.repositoryName

      const { data, code, msg } = await SnapshotDeleteAction(input)
      if (code != 0) {
        this.$message({
          type: 'error',
          message: msg
        })
        return
      } else {
        this.initRepositoryName()
        this.search()
        this.$message({
          type: 'success',
          message: msg
        })
        return
      }
    },
    closeoRestoreDialog(addSuccess) {
      this.openRestoreDialog = false
      if (addSuccess) {
        this.initRepositoryName()
        this.search()
      }
    },
    closeAddDialog(addSuccess) {
      this.openAddDialog = false
      if (addSuccess) {
        this.initRepositoryName()
        this.search()
      }
    },
    async initRepositoryName() {
      this.loading = true
      const input = {}
      input['es_connect'] = this.$store.state.baseData.EsConnectID
      const { data, code, msg } = await SnapshotRepositoryListAction(input)
      if (code == 0) {
        this.resData = data.res

        if (Object.keys(this.resData).length > 0) {
          this.repositoryName = Object.keys(this.resData)[0]
        }

        this.search()
      } else if (code == 199999) {
        this.$notify({
          title: 'Error',
          dangerouslyUseHTMLString: true,
          message: `
<strong>
            <i style="color: orange">path.repo没有设置</i><br>
<i>在elasticsearch.yml 配置文件中配置仓库base目录</i><br>
<i>添加path.repo: /tmp/tmp (/tmp/tmp 为快照备份所在文件夹, <br><i style="color: orange">注意</i>首先要先创建这个文件夹)</i>

          `,
          type: 'error'
        })
        return
      } else {
        this.$message({
          type: 'error',
          message: msg
        })
        return
      }
      this.loading = false
    },
    async search() {
      const input = {}

      input['es_connect'] = this.$store.state.baseData.EsConnectID
      input['repository'] = this.repositoryName
      const { data, code, msg } = await SnapshotListAction(input)

      if (code != 0) {
        this.$message({
          type: 'error',
          message: msg
        })
        return
      } else {
        this.$message({
          type: 'success',
          message: msg
        })
        this.tableData = data
      }
    },

    openDetail(row, index, tmp) {
      this.name = row.name
      this.drawerShow = true
    },
    async look(index) {
      this.name = index
      const input = {}
      input['es_connect'] = this.$store.state.baseData.EsConnectID
      input['repository'] = this.repositoryName
      input['snapshot'] = index

      const { data, code, msg } = await SnapshotDetailAction(input)
      if (code != 0) {
        this.$message({
          type: 'error',
          message: msg
        })
        return
      } else {
        this.snapshotDetail = data.snapshots
        this.drawerShow = true
      }
    },
    drawerHandleClose(done) {
      done()
    }
  }
}
</script>

<style scoped>

</style>
